<!doctype html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <!-- Title -->
    <title>Undex - Modern Admin Template</title>

    <!-- Favicon -->
    <link rel="icon" href="img/core-img/favicon.png">

    <!-- Master Stylesheet [If you remove this CSS file, your file will be broken undoubtedly.] -->
    <link rel="stylesheet" href="style.css">

</head>

<body>
    <!-- Preloader -->
    <div id="preloader"></div>

    <!-- Choose Layout -->
    <div class="choose-layout-area">
        <div class="setting-trigger-icon" id="settingTrigger">
            <i class="ti-settings"></i>
        </div>
        <div class="choose-layout" id="chooseLayout">
            <h6 class="mb-30">Choose A Layout</h6>
            <div class="demos-content">
                <div class="single-demos">
                    <a href="index-2.html"><img src="img/demo/1.png" alt=""></a>
                    <span>Vertical Dark</span>
                </div>
                <div class="single-demos">
                    <a href="http://demo.riktheme.com/undex-1/side-menu/index.html"><img src="img/demo/2.png" alt=""></a>
                    <span>Vertical Light</span>
                </div>
                <div class="single-demos">
                    <a href="http://demo.riktheme.com/undex-1/side-menu-gradient/index.html"><img src="img/demo/3.png" alt=""></a>
                    <span>Sidebar Gradient</span>
                </div>
            </div>
        </div>
    </div>

    <!-- ======================================
    ******* Page Wrapper Area Start **********
    ======================================= -->
    <div class="ecaps-page-wrapper">
        <!-- Sidemenu Area -->
        <div class="ecaps-sidemenu-area">
            <!-- Desktop Logo -->
            <div class="ecaps-logo">
                <a href="index-2.html"><img class="desktop-logo" src="img/core-img/logo.png" alt="Desktop Logo"> <img class="small-logo" src="img/core-img/small-logo.png" alt="Mobile Logo"></a>
            </div>

            <!-- Side Nav -->
            <div class="ecaps-sidenav" id="ecapsSideNav">
                <!-- Side Menu Area -->
                <div class="side-menu-area">
                    <!-- Sidebar Menu -->
                    <nav>
                        <ul class="sidebar-menu" data-widget="tree">
                            <li class="sidemenu-user-profile d-flex align-items-center">
                                <div class="user-thumbnail">
                                    <img src="img/member-img/1.png" alt="">
                                </div>
                                <div class="user-content">
                                    <h6>Ajoy Das</h6>
                                    <span>Pro User</span>
                                </div>
                            </li>
                            <li><a href="index-2.html"><i class="icon_lifesaver"></i> <span>Dashboard</span></a></li>
                            <li><a href="widgets.html"><i class="icon_cog"></i> <span>Widgets</span></a></li>
                            <li class="treeview">
                                <a href="javascript:void(0)"><i class="icon_laptop"></i> <span>Apps</span> <i class="fa fa-angle-right"></i></a>
                                <ul class="treeview-menu">
                                    <li><a href="calendar.html">- Calendar</a></li>
                                    <li><a href="chat-box.html">- Chat box</a></li>
                                    <li><a href="project-list.html">- Project List</a></li>
                                    <li><a href="project-details.html">- Project Details</a></li>
                                </ul>
                            </li>
                            <li class="treeview active">
                                <a href="javascript:void(0)"><i class="icon_drive"></i> <span>UI kit</span> <i class="fa fa-angle-right"></i></a>
                                <ul class="treeview-menu">
                                    <li class="active"><a href="avatar.html">- Avatar</a></li>
                                    <li><a href="buttons.html">- Button</a></li>
                                    <li><a href="card.html">- Card</a></li>
                                    <li><a href="slider.html">- Slider</a></li>
                                    <li><a href="modals.html">- Modals</a></li>
                                    <li><a href="toastr.html">- Toastr</a></li>
                                    <li><a href="preloader.html">- Preloader</a></li>
                                    <li><a href="tab.html">- Tab</a></li>
                                    <li><a href="general.html">- General</a></li>
                                    <li><a href="progressbar.html">- Progressbar</a></li>
                                    <li><a href="notifications.html">- Notification</a></li>
                                    <li><a href="dropdown.html">- Dropdown</a></li>
                                    <li><a href="typography.html">- Typography</a></li>
                                </ul>
                            </li>
                            <li><a href="inbox.html"><i class="icon_globe-2"></i> <span>Email</span></a></li>
                            <li class="treeview">
                                <a href="javascript:void(0)"><i class="icon_easel"></i> <span>Charts</span> <i class="fa fa-angle-right"></i></a>
                                <ul class="treeview-menu">
                                    <li><a href="heigh-chart.html">- Heigh Chart</a></li>
                                    <li><a href="flot-chart.html">- Flot Chart</a></li>
                                    <li><a href="metricas-chart.html">- Metrica Chart</a></li>
                                    <li><a href="chartist.html">- Chartist Chart</a></li>
                                    <li><a href="google-chart.html">- Google Chart</a></li>
                                    <li><a href="morris-chart.html">- Morris Chart</a></li>
                                    <li><a href="peity-chart.html">- Peity Chart</a></li>
                                    <li><a href="chart-js.html">- Chart Js</a></li>
                                    <li><a href="c3-charts.html">- C3 Chart</a></li>
                                </ul>
                            </li>

                            <li class="treeview">
                                <a href="javascript:void(0)"><i class="icon_document_alt"></i> <span>Pages</span> <i class="fa fa-angle-right"></i></a>
                                <ul class="treeview-menu">
                                    <li><a href="blank.html">- Start Page</a></li>
                                    <li><a href="profile.html">- Profile</a></li>
                                    <li><a href="profile-2.html">- Profile 2</a></li>
                                    <li><a href="ribbons.html">- Ribbons</a></li>
                                    <li><a href="clipboard.html">- Clipboard</a></li>
                                    <li><a href="todo-list.html">- Todo List</a></li>
                                    <li><a href="light-box-gallery.html">- Light Box Gallery</a></li>
                                    <li><a href="gallery.html">- Gallery</a></li>
                                    <li><a href="range-slider.html">- Range Slider</a></li>
                                    <li><a href="timeline.html">- Timeline</a></li>
                                    <li><a href="timeline-2.html">- Timeline 2</a></li>
                                    <li><a href="sweet-alert.html">- Sweet Alert</a></li>
                                    <li><a href="nestable-list.html">- Nestable List</a></li>
                                </ul>
                            </li>

                            <li class="treeview">
                                <a href="javascript:void(0)"><i class="icon_documents_alt"></i> <span>Forms</span> <i class="fa fa-angle-right"></i></a>
                                <ul class="treeview-menu">
                                    <li><a href="basic-form.html">- Basic Form</a></li>
                                    <li><a href="form-validation.html">- Validation</a></li>
                                    <li><a href="rating.html">- Rating</a></li>
                                    <li><a href="form-switchers.html">- Switchers</a></li>
                                    <li><a href="file-upload.html">- File upload</a></li>
                                    <li><a href="form-input-mask.html">- Input Mask</a></li>
                                    <li><a href="form-wizard.html">- Form Wizard</a></li>
                                </ul>
                            </li>

                            <li class="treeview">
                                <a href="javascript:void(0)"><i class="icon_cart_alt"></i> <span>Ecommerce</span> <i class="fa fa-angle-right"></i></a>
                                <ul class="treeview-menu">
                                    <li><a href="product.html">- Products</a></li>
                                    <li><a href="product-details.html">- Products Details</a></li>
                                    <li><a href="order.html">- Orders</a></li>
                                    <li><a href="cart.html">- Cart</a></li>
                                    <li><a href="checkout.html">- Checkout</a></li>
                                </ul>
                            </li>

                            <li class="treeview">
                                <a href="javascript:void(0)"><i class="icon_table"></i> <span>Tables</span> <i class="fa fa-angle-right"></i></a>
                                <ul class="treeview-menu">
                                    <li><a href="basic-table.html">- Basic Table</a></li>
                                    <li><a href="data-table.html">- Data Table</a></li>
                                    <li><a href="table-layout-colourd.html">- Table Layout Color</a></li>
                                    <li><a href="price-table.html">- Price Table</a></li>
                                    <li><a href="edit-table.html">- Edit Table</a></li>
                                </ul>
                            </li>
                            <li class="treeview">
                                <a href="javascript:void(0)"><i class="icon_key_alt"></i> <span>User Page</span> <i class="fa fa-angle-right"></i></a>
                                <ul class="treeview-menu">
                                    <li><a href="login.html">- Login</a></li>
                                    <li><a href="register.html">- Register</a></li>
                                    <li><a href="lock-screen.html">- Lock Screen</a></li>
                                    <li><a href="forget-password.html">- Forget Password</a></li>
                                </ul>
                            </li>

                            <li class="treeview">
                                <a href="javascript:void(0)"><i class="icon_genius"></i> <span>General Pages</span> <i class="fa fa-angle-right"></i></a>
                                <ul class="treeview-menu">
                                    <li><a href="video.html">- Video</a></li>
                                    <li><a href="session-timeout.html">- Session timeout</a></li>
                                    <li><a href="invoice.html">- Invoice</a></li>
                                    <li><a href="contact.html">- Contact</a></li>
                                    <li><a href="coming-soon.html">- Coming Soon</a></li>
                                    <li><a href="404.html">- 404</a></li>
                                </ul>
                            </li>
                            <li class="treeview">
                                <a href="javascript:void(0)"><i class="icon_map_alt"></i> <span>Maps</span> <i class="fa fa-angle-right"></i></a>
                                <ul class="treeview-menu">
                                    <li><a href="google-map.html">- Google Map</a></li>
                                    <li><a href="vector-map.html">- Vector Map</a></li>
                                </ul>
                            </li>
                            <li class="treeview">
                                <a href="javascript:void(0)"><i class="icon_shield"></i> <span>Icons</span> <i class="fa fa-angle-right"></i></a>
                                <ul class="treeview-menu">
                                    <li><a href="matarial-icons.html">- Materialize Icons</a></li>
                                    <li><a href="elegant-icons.html">- Elegant Icons</a></li>
                                    <li><a href="et-line-icons.html">- Et-line Icons</a></li>
                                    <li><a href="font-awesome.html">- Font-Awsome Icons</a></li>
                                    <li><a href="pe-7-stroke.html">- Pe-7 Stroke Icons</a></li>
                                    <li><a href="themify-icons.html">- Themify Icons</a></li>
                                </ul>
                            </li>
                            <li class="treeview">
                                <a href="javascript:void(0)"><i class="icon_menu"></i> <span>Multilevel</span> <i class="fa fa-angle-right"></i></a>
                                <ul class="treeview-menu">
                                    <li><a href="#">Level One</a></li>
                                    <li class="treeview">
                                        <a href="#">Level One <i class="fa fa-angle-right"></i></a>
                                        <ul class="treeview-menu">
                                            <li><a href="#">Level Two</a></li>
                                            <li><a href="#">Level Two</a></li>
                                            <li><a href="#">Level Two</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#">Level One</a></li>
                                </ul>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>

        <!-- Page Content -->
        <div class="ecaps-page-content">
            <!-- Top Header Area -->
            <header class="top-header-area d-flex align-items-center justify-content-between">
                <div class="left-side-content-area d-flex align-items-center">
                    <!-- Mobile Logo -->
                    <div class="mobile-logo mr-3 mr-sm-4">
                        <a href="index-2.html"><img src="img/core-img/small-logo.png" alt="Mobile Logo"></a>
                    </div>

                    <!-- Triggers -->
                    <div class="ecaps-triggers mr-1 mr-sm-3">
                        <div class="menu-collasped" id="menuCollasped">
                            <i class="zmdi zmdi-menu"></i>
                        </div>
                        <div class="mobile-menu-open" id="mobileMenuOpen">
                            <i class="zmdi zmdi-menu"></i>
                        </div>
                    </div>

                    <!-- Left Side Nav -->
                    <ul class="left-side-navbar d-flex align-items-center">
                        <li class="hide-phone app-search mr-15">
                            <form role="search" class=""><input type="text" placeholder="Search..." class="form-control"> <button type="submit" class="mr-0"><i class="fa fa-search"></i></button></form>
                        </li>
                    </ul>
                </div>

                <div class="right-side-navbar d-flex align-items-center justify-content-end">
                    <!-- Mobile Trigger -->
                    <div class="right-side-trigger" id="rightSideTrigger">
                        <i class="ti-align-left"></i>
                    </div>

                    <!-- Top Bar Nav -->
                    <ul class="right-side-content d-flex align-items-center">
                        <li class="nav-item dropdown">
                            <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img class="border-radius-none" src="img/core-img/l3.jpg" alt=""></button>
                            <div class="dropdown-menu language-dropdown dropdown-menu-right">
                                <a href="#" class="dropdown-item"><img src="img/core-img/l1.jpg" alt=""> IND</a>
                                <a href="#" class="dropdown-item"><img src="img/core-img/l2.jpg" alt=""> LOP</a>
                                <a href="#" class="dropdown-item"><img src="img/core-img/l3.jpg" alt=""> KYI</a>
                                <a href="#" class="dropdown-item"><img src="img/core-img/l4.jpg" alt=""> RTY</a>
                            </div>
                        </li>
                        <!-- Full Screen Mode -->
                        <li class="full-screen-mode ml-1">
                            <a href="javascript:" id="fullScreenMode"><i class="zmdi zmdi-fullscreen"></i></a>
                        </li>

                        <li class="nav-item dropdown">
                            <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="icon_globe-2" aria-hidden="true"></i></button>

                            <div class="dropdown-menu dropdown-menu-right">
                                <!-- Top Message Area -->
                                <div class="top-message-area">
                                    <!-- Heading -->
                                    <div class="top-message-heading">
                                        <div class="heading-title">
                                            <h6>Messages</h6>
                                        </div>
                                        <span>5 New</span>
                                    </div>
                                    <div class="message-box" id="messageBox">
                                        <a href="#" class="dropdown-item">
                                            <i class="zmdi zmdi-email-open"></i>
                                            <span class="message-text">
                                                <span>6-hour video course on Angular</span>
                                                <span>3 min ago</span>
                                            </span>
                                        </a>
                                        <a href="#" class="dropdown-item">
                                            <i class="zmdi zmdi-email-open"></i>
                                            <span class="message-text">
                                                <span>Google Ads: You'll get a refund soon</span>
                                                <span>27 min ago</span>
                                            </span>
                                        </a>
                                        <a href="#" class="dropdown-item">
                                            <i class="zmdi zmdi-email-open"></i>
                                            <span class="message-text">
                                                <span>New Feature: HTTP Method Selection</span>
                                                <span>56 min ago</span>
                                            </span>
                                        </a>
                                        <a href="#" class="dropdown-item">
                                            <i class="zmdi zmdi-email-open"></i>
                                            <span class="message-text">
                                                <span>The Complete JavaScript Handbook</span>
                                                <span>1 hour ago</span>
                                            </span>
                                        </a>
                                        <a href="#" class="dropdown-item">
                                            <i class="zmdi zmdi-email-open"></i>
                                            <span class="message-text">
                                                <span>New comment: ecaps Template</span>
                                                <span>2 days ago</span>
                                            </span>
                                        </a>
                                        <a href="#" class="dropdown-item">
                                            <i class="zmdi zmdi-email-open"></i>
                                            <span class="message-text">
                                                <span>6-hour video course on Angular</span>
                                                <span>3 min ago</span>
                                            </span>
                                        </a>
                                        <a href="#" class="dropdown-item">
                                            <i class="zmdi zmdi-email-open"></i>
                                            <span class="message-text">
                                                <span>Google Ads: You'll get a refund soon</span>
                                                <span>27 min ago</span>
                                            </span>
                                        </a>
                                        <a href="#" class="dropdown-item">
                                            <i class="zmdi zmdi-email-open"></i>
                                            <span class="message-text">
                                                <span>New Feature: HTTP Method Selection</span>
                                                <span>56 min ago</span>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li class="nav-item dropdown">
                            <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="icon_lightbulb_alt" aria-hidden="true"></i> <span class="active-status"></span></button>
                            <div class="dropdown-menu dropdown-menu-right">
                                <!-- Top Notifications Area -->
                                <div class="top-notifications-area">
                                    <!-- Heading -->
                                    <div class="notifications-heading">
                                        <div class="heading-title">
                                            <h6>Notifications</h6>
                                        </div>
                                        <span>5 New</span>
                                    </div>

                                    <div class="notifications-box" id="notificationsBox">
                                        <a href="#" class="dropdown-item"><i class="ti-face-smile bg-success"></i><span>We've got something for you!</span></a>
                                        <a href="#" class="dropdown-item"><i class="zmdi zmdi-notifications-active bg-danger"></i><span>Domain names expiring on Tuesday</span></a>
                                        <a href="#" class="dropdown-item"><i class="ti-check"></i><span>Your commissions has been sent</span></a>
                                        <a href="#" class="dropdown-item"><i class="ti-heart bg-success"></i><span>You sold an item!</span></a>
                                        <a href="#" class="dropdown-item"><i class="ti-bolt bg-warning"></i><span>Security alert for your linked Google account</span></a>
                                        <a href="#" class="dropdown-item"><i class="ti-face-smile bg-success"></i><span>We've got something for you!</span></a>
                                        <a href="#" class="dropdown-item"><i class="zmdi zmdi-notifications-active bg-danger"></i><span>Domain names expiring on Tuesday</span></a>
                                        <a href="#" class="dropdown-item"><i class="ti-check"></i><span>Your commissions has been sent</span></a>
                                        <a href="#" class="dropdown-item"><i class="ti-heart bg-success"></i><span>You sold an item!</span></a>
                                        <a href="#" class="dropdown-item"><i class="ti-bolt bg-warning"></i><span>Security alert for your linked Google account</span></a>
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li class="nav-item dropdown">
                            <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img class="border-radius-50" src="img/member-img/1.png" alt=""></button>
                            <div class="dropdown-menu dropdown-menu-right">
                                <!-- User Profile Area -->
                                <div class="user-profile-area">
                                    <div class="user-profile-heading">
                                        <!-- Thumb -->
                                        <div class="profile-thumbnail">
                                            <img class="border-radius-50" src="img/member-img/1.png" alt="">
                                        </div>
                                        <!-- Profile Text -->
                                        <div class="profile-text">
                                            <h6>Ajoy Das</h6>
                                            <span>ajoydas@example.com</span>
                                        </div>
                                    </div>
                                    <a href="#" class="dropdown-item"><i class="ti-user text-default" aria-hidden="true"></i> My profile</a>
                                    <a href="#" class="dropdown-item"><i class="zmdi zmdi-email-open text-success" aria-hidden="true"></i> Messages</a>
                                    <a href="#" class="dropdown-item"><i class="ti-settings text-default" aria-hidden="true"></i> Account settings</a>
                                    <a href="#" class="dropdown-item"><i class="ti-heart text-purple" aria-hidden="true"></i> Support</a>
                                    <a href="#" class="dropdown-item"><i class="ti-unlink text-warning" aria-hidden="true"></i> Sign-out</a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </header>

            <!-- Main Content Area -->
            <div class="main-content">
                <div class="container-fluid">
                    <div class="row">
                        <!-- begin col-6 -->
                        <div class="col-xl-6">
                            <!-- begin panel -->
                            <div class="card">
                                <!-- begin panel-body -->
                                <div class="card-body">
                                    <div class="media media-sm mb-30">
                                        <a class="media-left" href="javascript:;">
                                            <img src="img/member-img/mail-1.jpg" alt="" class="media-object rounded" />
                                        </a>
                                        <div class="media-body">
                                            <h5 class="font-16">Media heading</h5>
                                            <p class="mb-0">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.</p>
                                        </div>
                                    </div>
                                    <div class="media media-sm mb-30">
                                        <a class="media-left" href="javascript:;">
                                            <img src="img/member-img/mail-2.jpg" alt="" class="media-object rounded" />
                                        </a>
                                        <div class="media-body">
                                            <h5 class="font-16">Media heading</h5>
                                            <p class="mb-0">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.</p>
                                            <div class="media mt-30">
                                                <a class="pull-left media-left" href="javascript:;">
                                                    <img src="img/member-img/mail-3.jpg" alt="" class="media-object rounded" />
                                                </a>
                                                <div class="media-body">
                                                    <h5 class="font-16">Nested media heading</h5>
                                                    <p class="mb-0">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="media media-sm mb-30">
                                        <a class="media-left" href="javascript:;">
                                            <img src="img/member-img/mail-4.jpg" alt="" class="media-object rounded" />
                                        </a>
                                        <div class="media-body">
                                            <h5 class="font-16">Media heading</h5>
                                            <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.</p>
                                        </div>
                                    </div>
                                    <div class="media media-sm">
                                        <a class="media-left" href="javascript:;">
                                            <img src="img/member-img/mail-5.jpg" alt="" class="media-object rounded" />
                                        </a>
                                        <div class="media-body">
                                            <h5 class="font-16">Media heading</h5>
                                            <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.</p>
                                        </div>
                                    </div>
                                </div>
                                <!-- end panel-body -->
                            </div>
                            <!-- end panel -->
                        </div>
                        <!-- end col-6 -->

                        <div class="col-xl-6">
                            <!-- begin panel -->
                            <div class="card">
                                <!-- begin panel-body -->
                                <div class="card-body">
                                    <h4 class="card-title">Media List</h4>
                                    <ul class="media-list">
                                        <li class="media media-sm mb-30">
                                            <a class="media-left" href="javascript:;">
                                                <img src="img/member-img/mail-2.jpg" alt="" class="media-object rounded-corner" />
                                            </a>
                                            <div class="media-body">
                                                <h5 class="font-16">Media heading</h5>
                                                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
                                                <div class="media media-sm mt-30">
                                                    <a class="media-left" href="javascript:;">
                                                        <img src="img/member-img/mail-3.jpg" alt="" class="media-object rounded-corner" />
                                                    </a>
                                                    <div class="media-body">
                                                        <h5 class="font-16">Nested media heading</h5>
                                                        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
                                                        <div class="media mt-30">
                                                            <a class="media-left" href="javascript:;">
                                                                <img src="img/member-img/mail-4.jpg" alt="" class="media-object rounded-corner" />
                                                            </a>
                                                            <div class="media-body">
                                                                <h5 class="font-16">Nested media heading</h5>
                                                                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="media mt-30">
                                                    <a class="media-left" href="javascript:;">
                                                        <img src="img/member-img/mail-5.jpg" alt="" class="media-object rounded-corner" />
                                                    </a>
                                                    <div class="media-body">
                                                        <h5 class="font-16">Nested media heading</h5>
                                                        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="media media-sm">
                                            <div class="media-body">
                                                <h5 class="font-16">Media heading</h5>
                                                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
                                            </div>
                                            <a class="media-right" href="javascript:;">
                                                <img src="img/member-img/mail-6.jpg" alt="" class="media-object rounded-corner" />
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <!-- end panel-body -->
                            </div>
                            <!-- end panel -->
                        </div>
                        <!-- end col-6 -->

                        <div class="col-xl-6">
                            <div class="card">
                                <div class="card-body">
                                    <div class="avatar-area">
                                        <h4 class="mt-0 card-title">Round Shape Avatar In Text</h4>
                                        <div class="media">
                                            <div class="avatar-box thumb-xl align-self-center mr-2"><span class="avatar-title bg-soft-success rounded-circle">DL</span></div>
                                            <div class="avatar-box thumb-lg align-self-center mr-2"><span class="avatar-title bg-soft-pink rounded-circle">DL</span></div>
                                            <div class="avatar-box thumb-md align-self-center mr-2"><span class="avatar-title bg-soft-purple rounded-circle">DL</span></div>
                                            <div class="avatar-box thumb-sm align-self-center mr-2"><span class="avatar-title bg-soft-warning rounded-circle">DL</span></div>
                                            <div class="avatar-box thumb-xs align-self-center"><span class="avatar-title bg-soft-info rounded-circle">DL</span></div>
                                        </div>
                                        <!--end media-->
                                    </div>
                                    <!--end card-body-->
                                </div>
                            </div>
                            <!--end card-->
                        </div>

                        <!--end col-->
                        <div class="col-xl-6">
                            <div class="card">
                                <div class="card-body">
                                    <div class="avatar-area">
                                        <h4 class="mt-0 card-title">Square Shape Avatar In Text</h4>
                                        <div class="media">
                                            <div class="avatar-box thumb-xl align-self-center mr-2"><span class="avatar-title bg-soft-success rounded">DL</span></div>
                                            <div class="avatar-box thumb-lg align-self-center mr-2"><span class="avatar-title bg-soft-pink rounded">DL</span></div>
                                            <div class="avatar-box thumb-md align-self-center mr-2"><span class="avatar-title bg-soft-purple rounded">DL</span></div>
                                            <div class="avatar-box thumb-sm align-self-center mr-2"><span class="avatar-title bg-soft-warning rounded">DL</span></div>
                                            <div class="avatar-box thumb-xs align-self-center"><span class="avatar-title bg-soft-info rounded">DL</span></div>
                                        </div>
                                        <!--end media-->
                                    </div>
                                    <!--end card-body-->
                                </div>
                                <!--end card-->
                            </div>
                        </div>
                        <!--end col-->

                        <div class="col-xl-6">
                            <div class="card">
                                <div class="card-body">
                                    <div class="avatar-area">
                                        <h4 class="mt-0 card-title">Avatar</h4>
                                        <div class="media"><a class="" href="#"><img src="img/member-img/1.png" alt="user" class="rounded-circle thumb-md"></a>
                                            <div class="media-body align-self-center ml-3">
                                                <p class="font-14 font-weight-bold mb-0">John Tamez</p>
                                                <p class="mb-0 font-12 text-muted">Johntamez@gmail.com</p>
                                            </div>
                                        </div>
                                        <!--end media-->
                                    </div>
                                </div>
                                <!--end card-body-->
                            </div>
                            <!--end card-->
                        </div>
                        <!--end col-->

                        <div class="col-xl-6">
                            <div class="card">
                                <div class="card-body">
                                    <div class="avatar-area">
                                        <h4 class="mt-0 card-title">Group Avatar</h4>
                                        <div class="img-group">
                                            <a class="user-avatar user-avatar-group" href="#"><img src="img/member-img/2.png" alt="user" class="rounded-circle"> </a>
                                            <a class="user-avatar user-avatar-group" href="#"><img src="img/member-img/3.png" alt="user" class="rounded-circle"> </a>
                                            <a class="user-avatar user-avatar-group" href="#"><img src="img/member-img/4.png" alt="user" class="rounded-circle"> </a>
                                            <a class="user-avatar user-avatar-group" href="#"><img src="img/member-img/5.png" alt="user" class="rounded-circle"></a>
                                        </div>
                                    </div>
                                    <!--end img-group-->
                                </div>
                                <!--end card-body-->
                            </div>
                            <!--end card-->
                        </div>
                        <!--end col-->

                        <div class="col-xl-6">
                            <div class="card">
                                <div class="card-body">
                                    <div class="avatar-area">
                                        <h4 class="mt-0 card-title">Avatar Size</h4>
                                        <a class="user-avatar mr-2" href="#"><img src="img/member-img/6.png" alt="user" class="thumb-xl mb-2 rounded-circle"> </a>
                                        <a class="user-avatar mr-2" href="#"><img src="img/member-img/7.png" alt="user" class="thumb-lg mb-2 rounded-circle"> </a>
                                        <a class="user-avatar mr-2" href="#"><img src="img/member-img/8.png" alt="user" class="thumb-md mb-2 rounded-circle"> </a>
                                        <a class="user-avatar mr-2" href="#"><img src="img/member-img/9.png" alt="user" class="thumb-sm mb-2 rounded-circle"> </a>
                                        <a class="user-avatar mr-2" href="#"><img src="img/member-img/10.png" alt="user" class="thumb-xs mb-2 rounded-circle"></a>
                                    </div>
                                    <!--end card-body-->
                                </div>
                            </div>
                            <!--end card-->
                        </div>

                        <!--end col-->
                        <div class="col-xl-6">
                            <div class="card">
                                <div class="card-body">
                                    <div class="avatar-area">
                                        <h4 class="mt-0 card-title">Avatar Size</h4>
                                        <a class="user-avatar mr-2" href="#"><img src="img/member-img/11.png" alt="user" class="thumb-xl mb-2 rounded"> </a>
                                        <a class="user-avatar mr-2" href="#"><img src="img/member-img/12.png" alt="user" class="thumb-lg mb-2 rounded"> </a>
                                        <a class="user-avatar mr-2" href="#"><img src="img/member-img/1.png" alt="user" class="thumb-md mb-2 rounded"> </a>
                                        <a class="user-avatar mr-2" href="#"><img src="img/member-img/2.png" alt="user" class="thumb-sm mb-2 rounded"> </a>
                                        <a class="user-avatar mr-2" href="#"><img src="img/member-img/3.png" alt="user" class="thumb-xs mb-2 rounded"></a>
                                    </div>
                                    <!--end card-body-->
                                </div>
                            </div>
                            <!--end card-->
                        </div>
                        <!--end col-->

                        <div class="col-xl-6">
                            <div class="card">
                                <div class="card-body">
                                    <div class="avatar-area">
                                        <h4 class="mt-0 card-title">Avatar With Badge</h4>
                                        <div class="img-group">
                                            <a class="user-avatar mr-2" href="#"><img src="img/member-img/mail-3.jpg" alt="user" class="rounded-circle thumb-md"> <span class="avatar-badge online"></span> </a>
                                            <a class="user-avatar mr-2" href="#"><img src="img/member-img/mail-5.jpg" alt="user" class="rounded-circle thumb-md"> <span class="avatar-badge offline"></span> </a>
                                            <a class="user-avatar mr-2" href="#"><img src="img/member-img/mail-4.jpg" alt="user" class="rounded-circle thumb-md"> <span class="avatar-badge offline"></span> </a>
                                            <a class="user-avatar mr-2" href="#"><img src="img/member-img/mail-2.jpg" alt="user" class="rounded-circle thumb-md"> <span class="avatar-badge online"></span></a>
                                        </div>
                                    </div>
                                    <!--end img-group-->
                                </div>
                                <!--end card-body-->
                            </div>
                            <!--end card-->
                        </div>
                        <!--end col-->

                        <div class="col-xl-6">
                            <div class="card">
                                <div class="card-body">
                                    <div class="avatar-area">
                                        <h4 class="mt-0 card-title">Avatar With Tooltip</h4>
                                        <div class="media">
                                            <a class="mr-2" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Russell Jones"><img src="img/member-img/mail-3.jpg" alt="user" class="rounded-circle thumb-md"> </a>
                                            <a class="mr-2" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Otis Gomez"><img src="img/member-img/mail-3.jpg" alt="user" class="rounded-circle thumb-md"> </a>
                                            <a class="mr-2" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Frank Osborn"><img src="img/member-img/mail-3.jpg" alt="user" class="rounded-circle thumb-md"> </a>
                                            <a class="mr-2" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Dorothy Key"><img src="img/member-img/mail-3.jpg" alt="user" class="rounded-circle thumb-md"> </a>
                                            <a class="mr-2" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Joseph Cross"><img src="img/member-img/mail-3.jpg" alt="user" class="rounded-circle thumb-md"> </a>
                                            <a class="mr-2" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Shari Krieger"><img src="img/member-img/mail-3.jpg" alt="user" class="rounded-circle thumb-md"></a>
                                        </div>
                                        <!--end media-->
                                    </div>
                                </div>
                                <!--end card-body-->
                            </div>
                            <!--end card-->
                        </div>

                        <!--end col-->
                        <div class="col-xl-6">
                            <div class="card">
                                <div class="card-body">
                                    <div class="avatar-area">
                                        <h4 class="mt-0 card-title">Square Shape Avatar</h4>
                                        <div class="media">
                                            <a class="mr-2" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Smith Jones"><img src="img/member-img/4.png" alt="user" class="rounded thumb-md"> </a>
                                            <a class="mr-2" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Otis Gomez"><img src="img/member-img/4.png" alt="user" class="rounded thumb-md"> </a>
                                            <a class="mr-2" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Frank Osborn"><img src="img/member-img/4.png" alt="user" class="rounded thumb-md"> </a>
                                            <a class="mr-2" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Dorothy Key"><img src="img/member-img/4.png" alt="user" class="rounded thumb-md"> </a>
                                            <a class="mr-2" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Joseph Cross"><img src="img/member-img/4.png" alt="user" class="rounded thumb-md"> </a>
                                            <a class="mr-2" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Shari Krieger"><img src="img/member-img/4.png" alt="user" class="rounded thumb-md"></a>
                                        </div>
                                        <!--end media-->
                                    </div>
                                    <!--end card-body-->
                                </div>
                            </div>
                            <!--end card-->
                        </div>
                        <!--end col-->
                    </div>
                    <!--end row-->
                    <!-- Small Chat Box -->
                    <div class="small-chat-box fadeInRight animated">
                        <div class="heading d-flex align-items-center" draggable="true">
                            <img class="chat-thumb mr-3" src="img/member-img/1.png" alt="">
                            <div class="chat-header">
                                <h6 class="mb-0">Jhon Smith</h6>
                                <p class="mb-0 font-12 text-green">Active</p>
                            </div>
                        </div>

                        <div class="chat-history bg-img" id="chat-conversation" style="background-image: url(img/bg-img/4.jpg);">
                            <ul>
                                <li class="clearfix mb-15">
                                    <div class="message-data text-right">
                                        <span class="mr-2"><img class="chat-img" src="img/member-img/1.png" alt=""></span>
                                        <span class="message-data-time font-11">11:11 AM, Today</span>
                                    </div>
                                    <div class="message other-message float-right font-12">Hi Robert , how are you?</div>
                                </li>
                                <li class="clearfix mb-15">
                                    <div class="message-data">
                                        <span class="mr-2"><img class="chat-img" src="img/member-img/2.png" alt=""></span>
                                        <span class="message-data-time font-11">11:15 AM, Today</span>
                                    </div>
                                    <div class="message my-message font-12">Fine. and you?</div>
                                </li>
                                <li class="clearfix mb-15">
                                    <div class="message-data">
                                        <span class="mr-2"><img class="chat-img" src="img/member-img/2.png" alt=""></span>
                                        <span class="message-data-time font-11">11:16 AM, Today</span>
                                    </div>
                                    <div class="message my-message font-12">Fine. What's about vacation?.</div>
                                </li>
                                <li class="clearfix">
                                    <div class="message-data text-right">
                                        <span class="mr-2"><img class="chat-img" src="img/member-img/1.png" alt=""></span>
                                        <span class="message-data-time font-11">11:18 AM, Today</span>
                                    </div>
                                    <div class="message other-message float-right font-12">We think for next weekend.</div>
                                    <div class="message other-message float-right font-12">Have fun!</div>
                                </li>
                            </ul>
                        </div>

                        <div class="form-chat">
                            <div class="input-group chat-group">
                                <input type="text" class="form-control">
                                <span class="input-group-btn">
                                    <button class="btn btn-primary" type="button">Send
                                    </button> </span></div>
                        </div>
                    </div>
                    <div id="small-chat">
                        <span class="badge badge-primary float-right">6</span>
                        <a class="open-small-chat pulse" href="#">
                            <i class="zmdi zmdi-comment-more"></i>
                        </a>
                    </div>
                </div>

                <!-- Footer Area -->
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-12">
                            <!-- Footer Area -->
                            <footer class="footer-area">
                                <!-- Copywrite Text -->
                                <div class="copywrite-text text-center">
                                    <p>Undex &copy; 2019 created by <a href="#">Theme-zome</a></p>
                                </div>
                            </footer>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ======================================
    ********* Page Wrapper Area End ***********
    ======================================= -->

    <!-- Must needed plugins to the run this Template -->
    <script src="js/jquery.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bundle.js"></script>

    <!-- Active JS -->
    <script src="js/default-assets/fullscreen.js"></script>
    <script src="js/default-assets/active.js"></script>

    <!-- These plugins only need for the run this page -->
    <script src="js/default-assets/dashboard-chat.js"></script>

</body>


</html>